<template>
  <div class="indexHeader">
    <div class="left">后台管理系统</div>
    <div class="right">
      <div class="changeTheme">
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            {{themeTitle}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="theme1">主题一</el-dropdown-item>
            <el-dropdown-item command="theme2">主题二</el-dropdown-item>
            <el-dropdown-item command="theme3">主题三</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <img src="../assets/images/0.jpg" alt class="avatar" />
      <!-- <el-avatar src="../assets/images/0.jpg"></el-avatar>/ -->
      <el-dropdown>
        <span class="el-dropdown-link">
          {{showAccount}}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="loginOut">退出</el-dropdown-item>
          <el-dropdown-item @click.native="clearSystemConfigCache">清除系统配置缓存</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>
<script>
export default {
  props: [],
  data() {
    return {
      showAccount: "",
      themeTitle: "切换主题"
    };
  },
  mounted() {
    if (this.$cookies.get("account")) {
      this.showAccount = this.$cookies.get("account");
    }
  },
  methods: {
    //退出
    loginOut() {
      this.$confirm("确定退出此操作系统吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$cookies.set("token", "");
          this.$cookies.set("expired", "");
          this.$cookies.set("account", "");
          this.$router.push({ path: "/" });
        })
        .catch(() => {});
    },
    //清除系统配置缓存
    async clearSystemConfigCache() {
      let parames = {
        handshake: "",
        data: {}
      };
      let res = await this.$axios.post(
        this.$api.systemUpdateCache,
        JSON.stringify(parames)
      );
      if (res.code == 200) {
        this.$message({
          message: "清除缓存成功",
          type: "success"
        });
      } else {
        this.$message({
          message: res.message,
          type: "warning"
        });
      }
    },
    handleCommand(command) {
      this.$store.commit("setState", {
        key: "theme",
        value: command
      });
      switch (command) {
        case 'theme1':
          this.themeTitle = "主题一";
          break;
        case 'theme2':
          this.themeTitle = "主题二";
          break;
        case 'theme3':
          this.themeTitle = "主题三";
          break;
      }
    }
  }
};
</script>
<style scoped>
.indexHeader {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.4rem;
  color: #fff;
}
.avatar {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  margin-right: 0.2rem;
}
.left {
  font-size: 0.18rem;
}
.right {
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-dropdown {
  color: #fff;
  cursor: pointer;
}
.changeTheme {
  margin-right: 0.4rem;
}
</style>


